<script setup>
import { ref, defineProps } from 'vue'
import { regInputValue } from '../js/regInputValue.js'
import { _searchItem, _saveItem } from '/src/api/parameterConfiguration/index.js'
import { pushAllUrlData } from '../js/saveItem_all.js'
import { mainStore } from '/src/store/mainStore.js'

const store = mainStore()
const msg = defineProps({
  data: Object,
  width: Number,
  inputWidth: {
    type: String,
    default: '240px',
  },
})

const inputValue = ref('') //值
inputValue.value = msg.data.value.join(',')

const showType = ref('') //显示类型
const width = ref(0)
showType.value = msg.data.showType
width.value = msg.width ? msg.width + 'px' : '100%'

const editStatus = ref('') // 编辑状态 未保存为true 保存为faslse
const errTip = ref(null)

const verifyInput = (value) => {
  editStatus.value = '*'
  const res = regInputValue(value, msg.data.inputType)
  if (res.status == false) errTip.value = res.msg
  else errTip.value = null

  msg.data.value = inputValue.value.split(',')
  msg.data.arr = inputValue.value.split(',')

  pushAllUrlData(msg.data)
}

// 搜索选项
const searchItem = async () => {
  const { parentNode, key } = msg.data
  const url = `${store.cutArgPage}${parentNode ? '/' + parentNode : ''}/${key}`
  const res = await _searchItem(url)
  if (res.data.code != 200) ElMessage.error('查询失败')

  ElMessage.success('查询成功')
  inputValue.value = res.data.data[key]?.join(',')
  editStatus.value = ''
  errTip.value = null
}

// 保存选项
const saveItem = async () => {
  if (errTip.value != null) return ElMessage.error('保存失败，请输入正确的参数值')

  const { parentNode, key } = msg.data
  const params = {}
  if (parentNode) {
    params[parentNode] = {}
    params[parentNode][key] = inputValue.value.split(',').map(Number)
  } else {
    params[key] = inputValue.value.split(',').map(Number)
  }

  const res = await _saveItem(store.cutArgPage, params)

  if (res.data.code != 200) ElMessage.error('保存失败')

  inputValue.value = parentNode ? res.data.data[parentNode][key].join(',') : res.data.data[key].join(',')
  ElMessage.success('保存成功')
  editStatus.value = ''
  errTip.value = null
}
</script>

<template>
  <div class="inputEditer-container">
    <p :style="{ width }" :class="editStatus ? 'editing' : ''">
      <span>{{ editStatus }}</span>
      {{ msg.data.name }}
    </p>
    <!-- 普通输入框 -->
    <div class="inputBox" :style="{ width: msg.inputWidth }">
      <el-input v-model="inputValue" clearable @input="verifyInput" />
      <p class="errorTip">{{ errTip }}</p>
      <img src="/public/parameterConfig/search.png" @click="searchItem" />
      <img src="/public/parameterConfig/save.png" @click="saveItem" />
    </div>
  </div>
</template>

<style lang="less" scoped>
.inputEditer-container {
  width: 100%;
  height: 26px;
  display: flex;
  align-items: center;
  > p {
    line-height: 26px;
  }
  img {
    width: 20px;
    height: 20px;
    margin-left: 4px;
    cursor: pointer;
  }

  .inputBox {
    width: 240px;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    > div {
      width: 100%;
      height: 100%;
    }
    span {
      color: blue;
      line-height: 30px;
      width: 20px;
      font-size: 16px;
    }
  }

  .switchBox {
    > div {
      width: 50px;
    }
  }

  .editing {
    color: blue;
  }

  .errorTip {
    position: absolute;
    left: 0px;
    top: 26px;
    font-size: 10px;
    color: red;
    padding-left: 6px;
    width: 100%;
    opacity: 0.8;
  }
}
</style>

<style lang="less">
.inputBox,
.selectBox {
  .el-input,
  .el-input--suffix {
    height: 26px;
  }
  .el-input__inner,
  .el-input__wrapper {
    height: 26px;
  }

  .el-select__wrapper {
    height: 26px;
    min-height: 26px;
  }
}
</style>
